<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="checkbox" :checked="checkedAll" @change="setCheckedAll" /> 全选
        </div>
        <div>
            <span v-for="item  in list">
                <input type="checkbox" v-model="item.checked" />{{item.name}}
            </span>

        </div>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkedAll:false,//全选
            list: [{ id: 1, name: "唱", checked: false }, { id: 2, name: "跳", checked: false }, { id: 3, name: "rap", checked: false }, { id: 4, name: "篮球", checked: false }],//数据集
        },
        methods:{
            setCheckedAll(e){
               // this.checkedAll = e.target.checked;
                this.list.forEach(item=>item.checked=e.target.checked);

            }
        },
        watch:{
          
            // list(){
            //     console.log(this.list);
            // }
            list:{
                deep:true,//深度监听
                handler(){
                    // console.log(this.list);
                    //every判断里面每个元素是否都满足条件 都满足结果为true
                    //一个不满足结果为false
                    this.checkedAll  = this.list.every(item=>item.checked);
                },
                immediate:true //自动监听  页面启动就会监听一次
            }

        }

    })
</script>

</html>